<template>
  <div class="message assistant mb-4 scale-in">
    <div class="flex items-start gap-3">
      <div
        class="h-10 w-10 rounded-full flex items-center justify-center shrink-0"
        :class="[gradientClass]"
      >
        <i class="fa fa-spinner fa-spin text-white text-sm"></i>
      </div>
      <div class="message-content message-bubble assistant-message">
        <div class="flex items-center gap-1 mb-1">
          <span class="text-xs font-semibold text-gray-500">{{ loadingText }}</span>
        </div>
        <div class="typing-indicator">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoadingState',
  props: {
    pageType: {
      type: String,
      default: 'chat'
    }
  },
  computed: {
    loadingText() {
      switch (this.pageType) {
        case 'weather': return '正在查询天气...'
        case 'knowledge': return '正在查找知识...'
        case 'task': return '正在处理任务...'
        case 'emotion': return '正在思考回应...'
        case 'health': return '正在分析健康问题...'
        case 'culture': return '正在查找文化内容...'
        case 'model': return '正在切换模型...'
        default: return '正在思考...'
      }
    },
    gradientClass() {
      let start, end
      
      switch (this.pageType) {
        case 'weather':
          start = 'from-blue-500'
          end = 'to-blue-700'
          break
        case 'knowledge':
          start = 'from-purple-500'
          end = 'to-purple-700'
          break
        case 'task':
          start = 'from-green-500'
          end = 'to-green-700'
          break
        case 'emotion':
          start = 'from-pink-500'
          end = 'to-pink-700'
          break
        case 'health':
          start = 'from-amber-500'
          end = 'to-amber-700'
          break
        case 'culture':
          start = 'from-indigo-500'
          end = 'to-indigo-700'
          break
        case 'model':
          start = 'from-blue-500'
          end = 'to-blue-700'
          break
        default:
          start = 'from-blue-500'
          end = 'to-blue-700'
      }
      
      return ['bg-gradient-to-r', start, end]
    }
  }
}
</script>

<style scoped>
.typing-indicator {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.typing-indicator span {
  height: 8px;
  width: 8px;
  margin: 0 2px;
  background-color: #8B8B8B;
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1.5s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.3s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.15s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes bounce {
  0%, 80%, 100% { 
    transform: scale(0);
    opacity: 0.5;
  }
  40% { 
    transform: scale(1);
    opacity: 1;
  }
}

.scale-in {
  animation: scale-in 0.3s ease-out forwards;
}

@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.message-bubble {
  padding: 10px 16px;
  border-radius: 16px;
  max-width: 80%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.assistant-message {
  background-color: #f0f2f5;
  color: #1c1e21;
}
</style> 